<template>
  <div class="tabbar">
    <router-link tag='div' class="item" to="/recommend">
      <span>推荐</span>
    </router-link>
    <router-link tag='div' class="item" to="/singer">
      <span>歌手</span>
    </router-link>
    <router-link tag='div' class="item" to="/rank">
      <span>排行</span>
    </router-link>
    <router-link tag='div' class="item" to="/search">
      <span>搜索</span>
    </router-link>
  </div>
</template>

<script>
export default {
  name: 'Tabbar',
  data () {
    return {}
  },
  methods: {}
}
</script>

<style scoped lang='scss'>
  @import './../assets/css/mixin.scss';
  @import './../assets/css/variable.scss';
  .tabbar{
    position: relative;
    @include bg_sub_color();
    width: 100%;
    height: 84px;
    display: flex;
    justify-content: space-around;
    .item{
      line-height: 84px;
      @include font_color();
      @include font_size($font_medium);
    }
    .router-link-active{
      @include font_active_color();
    }
  }
</style>
